<route lang="json5">
{
  style: {
    navigationBarTitleText: '个人考核',
  },
}
</route>

<template>
  <view class="personal-access">
    <cover-view class="dropmenu-wrap">
      <wd-drop-menu>
        <wd-drop-menu-item
          v-model="quarterState.value"
          :options="quarterState.options"
          @change="changeQuarter"
        />
      </wd-drop-menu>
    </cover-view>
    <view>
      <view class="chart-wrap">
        <view class="chart-title">整体评价</view>
        <RadarChart
          :data="radarState.seriesData"
          :indicator="radarState.indicator"
          :quarter="radarState.currentQuarter"
          :score="radarState.currentScore"
        ></RadarChart>
      </view>
      <view class="chart-wrap">
        <view class="chart-title">整体考核数据</view>
        <BarChart :data="barState.seriesData" :axis-data="barState.xAxisData"></BarChart>
      </view>
    </view>
  </view>
</template>

<script setup>
import { readMessage } from '@/hooks/useReadMessage'
import AccessApi from '@/service/access'
import BarChart from './components/BarChart.vue'
import RadarChart from './components/RadarChart.vue'
import { useDictStore } from '@/store/dict'

/** 选择季度操作 start */
const quarterState = reactive({
  value: '',
  options: [],
})

const changeQuarter = (event) => {
  console.log('change', event)
  const { value, selectedItem } = event
  radarState.currentQuarter = selectedItem.label
  radarState.currentScore = selectedItem.score
  radarState.seriesData = radarState.allSeriesData[value]
}

const barState = reactive({
  seriesData: [],
  xAxisData: [],
})

const radarState = reactive({
  indicator: [], // indicator 数据要和 series data 的顺序保持一致
  seriesData: [], // 当前的 series 对象数据
  allSeriesData: {}, // 所有的 series 对象数据
  allScoreData: {}, // 所有分数对象数据
  currentQuarter: '',
  currentScore: '',
})

const formatRadarIndicator = () => {
  const { userEvaluationTarget } = useDictStore().dictData
  if (userEvaluationTarget && userEvaluationTarget.length) {
    radarState.indicator = userEvaluationTarget.map((item) => {
      return {
        field: item.value,
        name: item.label,
        max: 100, // 默认都为 100
        color: '#666',
      }
    })
  }
}
formatRadarIndicator()

const getAllAccess = async () => {
  const params = { year: '', quarter: '' }
  const { code, result } = await AccessApi.getPersonAccess(params)
  if (code === 200 && result) {
    if (result && result.length) {
      result.forEach((item) => {
        barState.seriesData.unshift(item.score)
        barState.xAxisData.unshift(`${item.year}年Q${item.quarter}`)
        // 用 options 的 value 映射 radar 的值
        const quarterKey = `${item.year}Q${item.quarter}`
        quarterState.options.push({
          label: `${item.year}年第${item.quarter}季度`,
          value: quarterKey,
          score: item.score,
        })
        // radarState.allSeriesData[quarterKey] = radarState.indicator.map((it) => {
        //   return item.target[it.field] / 100
        // })
        radarState.allSeriesData[quarterKey] = []
        // 根据此前就格式化好的 radar indicator，对数据进行处理，以保持顺序一致
        radarState.indicator = radarState.indicator.map((it) => {
          const tar = item.target.find((i) => i.target === it.field)
          radarState.allSeriesData[quarterKey].push(tar.value / 100)
          return {
            ...it,
            max: tar.max,
          }
        })
        radarState.allScoreData[quarterKey] = item.score
      })
      console.log('radar state', radarState)
      console.log('quarterState', quarterState)
      console.log('barState', barState)
      handleDefault()
    }
  }
}

const handleDefault = () => {
  if (quarterState.options.length) {
    const { value, score, label } = quarterState.options[0] // 默认选中第一个
    quarterState.value = value
    radarState.currentQuarter = label
    radarState.currentScore = score
    radarState.seriesData = radarState.allSeriesData[value]
  }
}

onLoad(() => {
  getAllAccess()
  readMessage('userEvaluation')
})
</script>

<style lang="scss" scoped>
.dropmenu-wrap {
  display: flex;
  justify-content: flex-end;

  :deep() .wd-drop-menu {
    width: 50%;
  }
}

.chart-wrap {
  .chart-title {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    background-image: linear-gradient(to bottom right, $uni-color-primary, $uni-color-success);
    background-clip: text;
    -webkit-text-fill-color: transparent;

    // transform: translateY(10px);
  }
}
</style>
